<template>
  <div class="portfolio-page bg-bg-primary">
    <!-- 作品集页面头部 -->
    <section class="portfolio-header py-12 md:py-16">
      <div class="layout-container">
        <div class="max-w-3xl mx-auto text-center">
          <h1
            class="text-4xl md:text-5xl font-bold mb-4 text-text-primary portfolio-title"
          >
            <span class="text-primary">作品集</span>
          </h1>
          <p class="text-lg text-text-secondary mb-8 portfolio-description">
            展示我参与开发的精选项目，涵盖Web应用、移动端开发、UI设计和开源贡献。
          </p>
        </div>
      </div>
    </section>

    <!-- 作品集内容区域 -->
    <section class="portfolio-content py-12">
      <div class="layout-container">
        <!-- 筛选控件 -->
        <div class="filter-container mb-12 animate-item">
          <div class="flex flex-wrap justify-center gap-4">
            <n-button
              :quaternary="selectedCategory !== 'all'"
              :type="selectedCategory === 'all' ? 'primary' : 'default'"
              @click="selectedCategory = 'all'"
            >
              全部
            </n-button>

            <n-button
              v-for="category in categories"
              :key="category.key"
              :quaternary="selectedCategory !== category.key"
              :type="selectedCategory === category.key ? 'primary' : 'default'"
              @click="selectedCategory = category.key"
            >
              {{ category.label }}
            </n-button>
          </div>
        </div>

        <!-- 项目网格 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div
            v-for="(project, index) in filteredProjects"
            :key="project.id"
            class="project-card animate-item"
            :style="{ animationDelay: `${index * 0.1}s` }"
          >
            <div class="card h-full flex flex-col">
              <div class="project-image-container mb-4">
                <img
                  :src="project.image"
                  :alt="project.title"
                  class="project-image w-full h-64 object-cover rounded-lg"
                />
                <div class="project-overlay">
                  <div class="project-actions">
                    <n-button
                      v-if="project.demoUrl"
                      circle
                      class="action-btn"
                      tag="a"
                      :href="project.demoUrl"
                      target="_blank"
                    >
                      <n-icon>
                        <EyeOutline />
                      </n-icon>
                    </n-button>
                    <n-button
                      v-if="project.githubUrl"
                      circle
                      class="action-btn"
                      tag="a"
                      :href="project.githubUrl"
                      target="_blank"
                    >
                      <n-icon>
                        <LogoGithub />
                      </n-icon>
                    </n-button>
                  </div>
                </div>
              </div>
              <div class="flex-grow">
                <div class="flex items-center gap-2 mb-2">
                  <n-tag size="small"> = {{ project.category }} </n-tag>
                  <span class="text-text-secondary text-sm">
                    {{ project.year }}
                  </span>
                </div>
                <h3 class="text-xl font-bold mb-2 text-text-primary">
                  {{ project.title }}
                </h3>
                <p class="text-text-secondary mb-4">
                  {{ project.description }}
                </p>
              </div>
              <div class="flex flex-wrap gap-2 mt-2 mb-4">
                <n-tag
                  v-for="tech in project.technologies"
                  :key="tech"
                  size="small"
                  class="tag"
                >
                  {{ tech }}
                </n-tag>
              </div>
              <div class="flex justify-between items-center mt-auto">
                <NuxtLink
                  :to="`/portfolio/${project.id}`"
                  class="text-primary hover:underline flex items-center"
                >
                  查看详情
                  <n-icon class="ml-1">
                    <ArrowForwardOutline />
                  </n-icon>
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>

        <!-- 没有找到项目时的提示 -->
        <div
          v-if="filteredProjects.length === 0"
          class="text-center py-12 animate-item"
        >
          <n-empty description="没有找到相关项目">
            <template #extra>
              <n-button @click="selectedCategory = 'all'"
                >查看全部项目</n-button
              >
            </template>
          </n-empty>
        </div>
      </div>
    </section>

    <!-- 合作邀请部分 -->
    <section class="collaboration-section py-16 bg-bg-primary">
      <div class="layout-container">
        <div class="max-w-3xl mx-auto text-center animate-item">
          <h2 class="text-3xl font-bold mb-4 text-text-primary">
            有项目想要合作？
          </h2>
          <p class="text-lg text-text-secondary mb-8">
            我热衷于探索新的项目机会和挑战。如果您有项目想要合作，欢迎联系我。
          </p>
          <n-button size="large" type="primary">
            <n-icon class="mr-1">
              <MailOutline />
            </n-icon>
            联系我
          </n-button>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import {
  EyeOutline,
  ArrowForwardOutline,
  MailOutline,
  LogoGithub,
} from "@vicons/ionicons5";
import { ref, computed } from "vue";

// 分类选项
const categories = [
  { key: "web", label: "Web应用" },
  { key: "mobile", label: "移动应用" },
  { key: "ui", label: "UI设计" },
  { key: "opensource", label: "开源项目" },
];

// 当前选择的分类
const selectedCategory = ref("all");

// 项目数据
const projects = [
  {
    id: 1,
    title: "个人博客平台",
    description:
      "基于Vue 3和Nuxt.js构建的个人博客平台，支持暗色模式、文章分类和评论系统。",
    image: "/images/portfolio/blog-platform.jpg",
    category: "Web应用",
    categoryKey: "web",
    year: "2023",
    technologies: ["Vue 3", "Nuxt.js", "TailwindCSS", "MongoDB"],
    demoUrl: "https://example.com/demo1",
    githubUrl: "https://github.com/example/project1",
  },
  {
    id: 2,
    title: "电子商务移动应用",
    description:
      "为一家服装品牌开发的移动购物应用，支持商品浏览、购物车和支付集成。",
    image: "/images/portfolio/ecommerce-app.jpg",
    category: "移动应用",
    categoryKey: "mobile",
    year: "2023",
    technologies: ["React Native", "Redux", "Firebase", "Stripe"],
    demoUrl: "https://example.com/demo2",
    githubUrl: "https://github.com/example/project2",
  },
  {
    id: 3,
    title: "数据可视化控制台",
    description:
      "为企业客户设计的数据可视化控制台，实现了复杂数据的图表展示和交互式分析功能。",
    image: "/images/portfolio/data-dashboard.jpg",
    category: "UI设计",
    categoryKey: "ui",
    year: "2022",
    technologies: ["Figma", "Adobe XD", "D3.js", "Chart.js"],
    demoUrl: "https://example.com/demo3",
  },
  {
    id: 4,
    title: "健康追踪应用",
    description:
      "一个跟踪健康指标的移动应用，支持活动记录、睡眠分析和健康建议。",
    image: "/images/portfolio/health-app.jpg",
    category: "移动应用",
    categoryKey: "mobile",
    year: "2022",
    technologies: ["Flutter", "Dart", "Firebase", "HealthKit API"],
    demoUrl: "https://example.com/demo4",
    githubUrl: "https://github.com/example/project4",
  },
  {
    id: 5,
    title: "开源UI组件库",
    description:
      "贡献了20多个组件到一个流行的开源UI库，包括表单控件、导航组件和数据展示组件。",
    image: "/images/portfolio/ui-library.jpg",
    category: "开源项目",
    categoryKey: "opensource",
    year: "2022",
    technologies: ["Vue", "TypeScript", "Storybook", "Jest"],
    demoUrl: "https://example.com/demo5",
    githubUrl: "https://github.com/example/project5",
  },
  {
    id: 6,
    title: "企业资源管理系统",
    description:
      "为制造业客户开发的企业资源管理系统，整合了库存、人力资源和财务管理功能。",
    image: "/images/portfolio/erp-system.jpg",
    category: "Web应用",
    categoryKey: "web",
    year: "2021",
    technologies: ["React", "Node.js", "PostgreSQL", "Docker"],
    demoUrl: "https://example.com/demo6",
  },
];

// 根据分类筛选项目
const filteredProjects = computed(() => {
  if (selectedCategory.value === "all") {
    return projects;
  }
  return projects.filter(
    (project) => project.categoryKey === selectedCategory.value
  );
});

// 根据分类获取标签类型
function getTagType(category: string) {
  switch (category) {
    case "Web应用":
      return "primary";
    case "移动应用":
      return "success";
    case "UI设计":
      return "warning";
    case "开源项目":
      return "info";
    default:
      return "default";
  }
}

// 使用 Intersection Observer 监测元素是否进入视口
onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("animate-visible");
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.1 }
  );

  // 观察所有需要动画的元素
  document.querySelectorAll(".animate-item").forEach((item) => {
    observer.observe(item);
  });
});
</script>

<style scoped>
.portfolio-page {
  color: var(--text-primary);
}

/* 标题样式 */
.portfolio-title {
  animation: fadeInUp 0.8s ease-out;
}

.portfolio-description {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* 头部样式 */
.portfolio-header {
  position: relative;
  background-color: var(--bg-secondary);
  overflow: hidden;
}

.portfolio-header::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background-color: var(--primary-color);
  opacity: 0.05;
  border-radius: 50%;
  z-index: 0;
}

/* 卡片样式 */
.card {
  background-color: var(--bg-secondary);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* 项目图片和悬停效果 */
.project-image-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.project-image {
  transition: transform 0.5s ease;
}

.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-actions {
  display: flex;
  gap: 1rem;
}

.action-btn {
  background-color: white;
  color: var(--text-primary);
  transform: translateY(20px);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.project-card:hover .project-image {
  transform: scale(1.05);
}

.project-card:hover .project-overlay {
  opacity: 1;
}

.project-card:hover .action-btn {
  transform: translateY(0);
}

/* 标签样式 */
.tag {
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.8rem;
}

/* 滚动触发动画 */
.animate-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 动画关键帧 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .card {
    padding: 1rem;
  }
}

/* 移动端过滤器样式优化 */
@media (max-width: 768px) {
  .filter-container {
    margin-bottom: 1.5rem;
  }

  .filter-container .flex {
    overflow-x: auto;
    padding-bottom: 0.5rem;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .filter-container .flex::-webkit-scrollbar {
    display: none;
  }

  /* 调整项目卡片样式 */
  .project-image-container {
    height: 180px;
  }

  /* 优化项目标签展示 */
  .project-tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .project-tags::-webkit-scrollbar {
    display: none;
  }
}

/* 在小屏幕上显示操作按钮，不需要悬停 */
@media (max-width: 768px) {
  .project-overlay {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .project-actions {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
